/*
Theme Name: Cliday
Theme URI: https://cliday.com/
Author: Cliday
Author URI: https://cliday.com/
Description: A simple, fast, and minimalist blog theme designed for Cliday. Mobile-first.
Version: 1.1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cliday
Tags: blog, one-column, custom-menu, featured-images, theme-options, translation-ready, accessibility-ready

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Base & Reset
# Layout
# Header
  ## Top Bar
  ## Main Header
  ## Secondary Navigation
  ## Panel Menu (Off-Canvas)
# Content
  ## General Content
  ## Buttons
  ## Single Post / Page Content
  ## Post Tags
  ## Images within Content
# Archive / Index (Post Cards)
# Pagination
# Load More Button
# Page Templates
  ## Page Hero
  ## Page Content Adjustments
# Gutenberg Blocks
  ## Latest Posts
# Footer
  ## Main Footer
  ## Footer Bottom Bar (Copyright & Language Switcher)
# Utilities
  ## Scroll to Top Button
  ## Core WP Classes
  ## Accessibility
# Category Archive Specifics
# 404 Page
# Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
    --header-total-height: 120px;
    --header-bg: #fff;
    --header-border-color: #eee;
    --header-top-bar-bg: #ffffff;
    --text-color: #333;
    --link-color: #555;
    --link-hover-color: #000;
    --nav-tag-bg: #f5f5f5;
    --nav-tag-text: #555;
    --nav-tag-hover-bg: #eee;
    --primary-accent: #FFA500;
    --secondary-accent: #FF8C00;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --panel-width: 300px;
    --panel-bg: #2d3748;
    --panel-text-color: #e0e0e0;
    --panel-link-hover-bg: rgba(255, 255, 255, 0.1);
}

/*--------------------------------------------------------------
# Base & Reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
    font-family: sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll due to panel */
}

/* Helper classes for JS */
body.primary-menu-panel-open {
    /* overflow: hidden;  <- Remove this line */
}

body.primary-menu-panel-open .panel-overlay {
    opacity: 1;
    visibility: visible;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.site {
    /* No specific styles needed for the main wrapper unless for background */
}

.site-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.site-main {
    /* No styles needed yet if it's just a single column */
}

/* single.php - Header Layout */
.single-post-header {
    display: flex;
    align-items: flex-start; /* Alinea los items al inicio */
    gap: 25px; /* Espacio entre imagen e info */
    margin-bottom: 20px; /* Reducido Espacio debajo de la cabecera, antes del contenido */
    padding-bottom: 15px; /* Reducido Espacio opcional al final de la cabecera */
  }
  
  /* Contenedor de la imagen destacada */
  .post-featured-image-container {
    flex: 0 0 150px; /* No crece, no encoge, base de 150px */
    width: 120px;
    height: 120px;
    overflow: hidden; /* Asegura que el border-radius funcione bien */
  }
  
  /* Imagen destacada */
  .post-featured-image-container img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre el área sin distorsionar la imagen */
    border-radius: 20px; /* Cantos muy redondeados (ajusta el valor si quieres más o menos) */
  }
  
  /* Contenedor de la información (título, categoría, extracto) */
  .post-info {
    flex: 1; /* Ocupa el espacio restante */
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
  }
  
  /* Ajustes opcionales para el texto dentro de post-info */
  .post-info .entry-title {
    margin-bottom: 0; /* Quita margen inferior si lo tiene por defecto */
    font-size: 1.7rem; /* Reducido tamaño del título */
    line-height: 1.1; /* Ajustar altura de línea */
  }
  
  .post-info .entry-category-container {
     order: -1; /* Mueve la categoría arriba del título */
     margin-bottom: 0;
  }
  
  .post-info .entry-excerpt p {
    margin-bottom: 0; /* Quita margen inferior si el excerpt lo añade */
    font-size: 1rem;
    color: #555;
  }
  
  /* Ajusta el contenedor de posts relacionados si es necesario */
  .related-posts {
      margin-top: 40px;
  }
  .related-posts-grid {
      /* Asegúrate de que el contenedor site-container no interfiera si no lo necesitas */
      /* width: 100%; */ /* Descomenta si quieres ancho completo para la rejilla */
  }
  

#content.site-content {
    padding-top: 1rem; /* Space above content if header isn't sticky */
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.site-header {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 2rem;
    background-color: var(--header-bg);
    position: relative;
    z-index: 100;
}

/* ## Top Bar */
.header-top-bar {
    background-color: var(--header-top-bar-bg);
    padding-top: 0.3rem;
    font-size: 0.85rem;
    min-height: 30px;
}

.header-top-bar-inner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.header-top-left {
    display: none; /* Hidden or empty */
}

.header-top-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-top-link {
    text-decoration: none;
    color: var(--link-color);
}
.header-top-link:hover {
    color: var(--link-hover-color);
}

.social-navigation {
    /* Container styles if needed */
}

.social-links-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.75rem;
}

.social-links-menu li {
    margin: 0;
    padding: 0;
    line-height: 1;
}

.social-links-menu a.social-icon-link { /* Target WP Walker generated links */
    display: block;
    color: var(--link-color);
    padding: 5px;
    line-height: 0; /* Collapse line height for icon alignment */
}

.social-links-menu a.social-icon-link:hover {
    color: var(--link-hover-color);
}

.social-links-menu svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* ## Main Header (Logo, Search, Toggle) */
.header-main {
    display: flex;
    justify-content: space-between; /* Logo left, Search/Toggle group right */
    align-items: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 1rem; /* Add gap between elements */
}

.site-branding {
    flex-shrink: 0; /* Prevent logo from shrinking */
    margin-right: auto; /* Push other elements to the right */
}

.custom-logo-link img,
.site-branding img.custom-logo {
    width: 130px; /* Mobile default */
    height: auto;
    max-width: 100%;
    max-height: none;
}

.site-title a {
    font-size: 1.8rem; /* Adjust if using title instead of logo */
    font-weight: bold;
    color: var(--text-color);
    text-decoration: none;
}

/* Hide site title and description if logo is present */
.custom-logo + .site-title,
.custom-logo ~ .site-description,
.site-description { /* Always hide description */
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

/* Search Form Container */
.search-form-container {
    position: relative;
    max-width: 300px;
    flex-shrink: 1; /* Allow search to shrink */
}

/* Right Container (Toggle) */
.header-main-right {
    /* Only contains the toggle */
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Prevent toggle from shrinking */
}

.search-form {
    /* Original search form styles */
    /* position: relative; /* Removed as container handles positioning */
    padding: 3px;
    background: var(--gradient);
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    max-width: 300px;
}

.search-form label {
    display: flex;
    flex-grow: 1;
    margin: 0;
}

.search-form .search-field {
    height: 45px;
    padding: 0 15px;
    border: none;
    background-color: #fff;
    flex-grow: 1;
    margin: 0;
    box-sizing: border-box;
    font-size: 1rem;
    color: #333;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.search-form .search-field:focus {
    outline: none;
    box-shadow: none;
}

.search-form .search-submit {
    height: 45px;
    border: none;
    background-color: #eee;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    flex-shrink: 0;
}

.search-form .search-submit svg {
    width: 18px;
    height: 18px;
    fill: #555;
}

.search-form .search-submit:hover {
    background-color: #ddd;
}

/* Main Menu Toggle Button (Always Visible) */
.menu-toggle.main-menu-toggle {
    position: relative; /* Ensure z-index works correctly */
    z-index: 1000; /* Higher than search results container */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-bg);
    border: 1px solid var(--panel-bg);
    padding: 0;
    cursor: pointer;
    color: white;
    flex-shrink: 0;
    border-radius: 10px;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    line-height: 1;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.menu-toggle.main-menu-toggle:hover {
    background-color: white;
    border-color: var(--panel-bg);
    color: var(--panel-bg);
}

/* Hamburger Icon */
.menu-toggle .hamburger-icon {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    position: relative;
    transition: background-color 0.1s 0.2s ease-in-out;
    border-radius: 1px;
}

.menu-toggle .hamburger-icon::before,
.menu-toggle .hamburger-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    left: 0;
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, bottom 0.3s ease-in-out;
    border-radius: 1px;
}

.menu-toggle .hamburger-icon::before {
    top: -6px;
}

.menu-toggle .hamburger-icon::after {
    bottom: -6px;
}

/* Transform hamburger to X when panel is open */
body.primary-menu-panel-open .menu-toggle .hamburger-icon {
    background-color: transparent; /* Hide middle bar */
    transition: background-color 0.1s ease-in-out; /* Faster fade out for middle */
}

body.primary-menu-panel-open .menu-toggle .hamburger-icon::before {
    top: 0;
    transform: rotate(-45deg);
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

body.primary-menu-panel-open .menu-toggle .hamburger-icon::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out, bottom 0.3s ease-in-out;
}

/* ## Secondary Navigation Bar */
.header-secondary-bar {
    background-color: var(--primary-accent);
    border-top: none;
    max-width: 1200px;
    margin: 0 auto 1rem auto;
    padding: 0.3rem 0; /* Reduced vertical padding */
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: grab;
}

.header-secondary-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE and Edge */
}
.header-secondary-bar-inner::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.secondary-navigation {
    width: auto;
    display: inline-block;
    white-space: nowrap; /* Prevent menu items from wrapping */
}

ul.secondary-menu {
    list-style: none;
    padding: 0 1rem; /* Padding inside the scrollable area */
    margin: 0;
    margin-right: 2rem;
    display: inline-flex;
    gap: 1.5rem;
    align-items: center;
    height: 100%;
}

ul.secondary-menu li {
    display: inline-block;
    margin: 0;
}

ul.secondary-menu a {
    text-decoration: none;
    color: #ffffff; /* White text */
    background-color: transparent;
    padding: 0.4rem 0 0.3rem 0;
    border-radius: 0;
    display: inline-block;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.3;
    transition: color 0.2s ease-in-out;
    border: none;
    border-bottom: 2px solid transparent; /* Underline effect space */
    white-space: nowrap; /* Ensure link text doesn't wrap */
}

ul.secondary-menu a:hover,
ul.secondary-menu li.current-menu-item > a,
ul.secondary-menu li.current-menu-ancestor > a {
    color: #ffffff;
    background-color: transparent;
    border-bottom-color: var(--secondary-accent); /* Underline effect */
}

/* Drag-to-Scroll Helper Styles (Activated by JS) */
.header-secondary-bar.is-active,
.header-secondary-bar.is-dragging {
    cursor: grabbing;
}
.header-secondary-bar.is-dragging ul.secondary-menu a {
    pointer-events: none; /* Prevent link clicks during drag */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ## Panel Menu (Off-Canvas) */
.primary-menu-panel-container {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    width: var(--panel-width);
    max-width: 85%; /* Limit on very small screens */
    height: 100vh;
    background-color: var(--panel-bg);
    color: var(--panel-text-color);
    z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* Smooth transition */
    overflow-y: auto;
    visibility: hidden; /* Hide initially */
}

.primary-menu-panel-container.is-open {
    transform: translateX(0);
    visibility: visible;
}

.primary-menu-panel-inner {
    padding: 2rem 1.5rem;
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Panel Close Button */
.close-menu-toggle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    color: var(--panel-text-color);
    cursor: pointer;
    padding: 5px;
    line-height: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-menu-toggle:hover {
    color: var(--primary-accent);
}

.close-icon {
    display: block;
    width: 20px;
    height: 2px;
    background-color: currentColor;
    position: relative;
    transform: rotate(45deg);
}

.close-icon::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(90deg);
}

/* Navigation within Panel */
.main-navigation-panel {
    margin-top: 2.5rem; /* Space below close button */
    flex-grow: 1; /* Occupy available space */
}

ul.primary-menu-panel-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul.primary-menu-panel-list li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
}

ul.primary-menu-panel-list li:last-child {
    border-bottom: none;
}

ul.primary-menu-panel-list a {
    display: block;
    padding: 0.8rem 0;
    text-decoration: none;
    color: var(--panel-text-color);
    font-size: 1.1rem;
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
}

ul.primary-menu-panel-list a:hover,
ul.primary-menu-panel-list li.current-menu-item > a,
ul.primary-menu-panel-list li.current-menu-ancestor > a {
    background-color: var(--panel-link-hover-bg);
    color: #fff; /* Brighter white on hover */
    padding-left: 0.5rem; /* Slight indentation on hover */
}

/* Submenus in panel */
ul.primary-menu-panel-list ul.sub-menu {
    list-style: none;
    padding: 0.5rem 0 0.5rem 1.5rem; /* Indent */
    margin: 0;
    background-color: rgba(0, 0, 0, 0.2); /* Slightly different background */
}

ul.primary-menu-panel-list ul.sub-menu li {
    border: none; /* Remove borders from subitems */
}

ul.primary-menu-panel-list ul.sub-menu a {
    font-size: 1rem; /* Slightly smaller */
    padding: 0.6rem 0;
}

ul.primary-menu-panel-list ul.sub-menu a:hover,
ul.primary-menu-panel-list ul.sub-menu li.current-menu-item > a,
ul.primary-menu-panel-list ul.sub-menu li.current-menu-ancestor > a {
    background-color: var(--panel-link-hover-bg);
    color: #fff;
    padding-left: 0.5rem; /* Slight indentation on hover */
}

body.primary-menu-panel-open .panel-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease, visibility 0s linear 0s;
}

/* Remove old/obsolete header styles */
.main-navigation {
    width: auto; /* Resetting just in case, likely not needed */
}
.header-secondary-nav {
     display: none !important; /* Hide old secondary nav container */
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

/* ## General Content */

/* ## Buttons */
.post-card .read-more-link {
    text-decoration: none;
    color: var(--secondary-accent);
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.post-card .read-more-link:hover {
    color: var(--primary-accent);
    background-color: var(--secondary-accent);
}

.read-more-link {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 15px;
    text-decoration: none;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    background-color: var(--primary-accent); /* Primary accent for background */
    color: black; /* Temporarily set to black for visibility test */
    border: 1px solid var(--primary-accent); /* Primary accent border */
}

.read-more-link:hover {
    background-color: var(--secondary-accent); /* Visual transformation on hover */
    border-color: var(--secondary-accent); /* Visual transformation on hover */
}

article {
    margin-bottom: 3rem;
    border-bottom: 1px solid #f0f0f0;
}

article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.entry-header {
    margin-bottom: 1rem;
}

.entry-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.entry-title a {
    text-decoration: none;
    color: inherit;
}

/* --- Single Post Meta --- */
.entry-single .entry-meta {
    font-size: 0.9rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px; /* Space above meta on single posts */
}

/* Keep the specific link color, but add underline on hover */
.entry-single .entry-meta a {
    color: #555;
}
.entry-single .entry-meta a:hover {
    color: var(--primary-accent); /* Inherited, but explicit for clarity */
    text-decoration: underline;
}

/* --- Post Card Meta --- */

/* Author Meta */
/* REMOVED OBSOLETE STYLES for .post-card .entry-meta-author */
/* .post-card .entry-meta-author { ... } */
/* .post-card .entry-meta-author .autopost-meta-avatar { ... } */

/* Bottom Meta (Date & Read More Container) */
.post-card .entry-meta-bottom {
    /* display: flex; */ /* Removed */
    /* justify-content: space-between; */ /* Removed */
    align-items: center; /* Keep vertical alignment */
    font-size: 0.85rem; /* Use base size */
    text-align: right; /* Align content (the link) to the right */
}

/* ## Entry Content Styles */
.entry-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #111;
}

.entry-content a {
    color: var(--primary-accent);
    text-decoration: underline;
}
.entry-content a:hover {
    color: var(--secondary-accent);
}

/* Headings within content */
.entry-content h1 {
    font-size: 1.8em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.entry-single .entry-content h2,
.page .entry-content h2 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.entry-content h3 {
    font-size: 1.3em;
    line-height: 1.4;
}

.entry-content p,
.page-content p,
p,
.entry-content ul,
.page-content ul,
ul,
.entry-content ol,
.page-content ol,
ol
{
    margin-bottom: 1.5em;
}

/* Specific heading adjustments for single/page */
.entry-single .entry-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.2rem;
    color: #111;
}

.entry-single .entry-featured-image,
.page-featured-image { /* Combine page featured image */
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    line-height: 0;
}

/* Specific max-width for single post featured image */
.entry-single .entry-featured-image {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


.entry-single .entry-featured-image img,
.page-featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

.entry-single .entry-content,
.page .entry-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Remove default margins from direct children within single/page content */
.entry-single .entry-content > *:first-child,
.page .entry-content > *:first-child {
    margin-top: 0;
}
.entry-single .entry-content > *:last-child,
.page .entry-content > *:last-child {
    margin-bottom: 0;
}

/* ## Post Tags */
.entry-single .post-tags {
    font-size: 0.9rem;
}

.entry-single .tags-title {
    font-weight: 600;
    margin-right: 0.5em;
    color: #555;
}

.entry-single .post-tags a {
    display: inline-block;
    text-decoration: none;
    color: #fff; /* White text */
    background-color: var(--primary-accent); /* Primary accent background */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-right: 0.5em;
    margin-bottom: 0.5em; /* Spacing if wraps */
    border: none;
}

.entry-single .post-tags a:hover {
    background-color: var(--secondary-accent);
    color: #fff;
}

/* ## Images within Content */
.entry-content img,
.entry-single .entry-content img,
.page .entry-content img {
    border-radius: 8px;
    margin-bottom: 1.5em; /* Space below images */
    margin-top: 1.5em; /* Add space above images */
    height: auto; /* Ensure aspect ratio is maintained */
}

/*--------------------------------------------------------------
# Archive / Index (Post Cards)
--------------------------------------------------------------*/
.posts-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Ensure cards within grids don't add their own bottom margin */
.posts-grid .post-card,
.wp-block-latest-posts__list > li {
    margin-bottom: 0;
}

.post-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: flex;
    align-items: stretch;
}

.post-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* Renamed and adjusted styles for thumbnail wrapper */
.post-card-thumbnail-wrapper {
    flex: 0 0 120px; /* Fixed width for image */
    height: 120px; /* Added: Make it square */
    line-height: 0; /* Remove space below image */
    overflow: hidden;
    position: relative; /* For potential absolute positioned elements inside */
}

.post-card-thumbnail-wrapper img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Crop image nicely */
    display: block;
}

.post-card-content {
    padding: 0.5rem 1rem; /* Reduced vertical padding */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content area to grow */
    align-self: center;
}

/* Category Tag Style - Minor adjustments */


/* Text color based on contrast */
.post-card-category.has-light-text,
.entry-category-tag.has-light-text {
    color: #fff;
}

.post-card-category.has-dark-text,
.entry-category-tag.has-dark-text {
    color: #111;
}

/* Category Tags */
.entry-category-tag,
.post-card-category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--text-color);
    padding: 0.3rem 0;
    transition: color 0.2s ease-in-out;
}

.post-card-category {
    color: #000;
}

.post-card .entry-header {
    margin-bottom: 2px;
}

.post-card .entry-title {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.post-card .entry-title a {
    text-decoration: none;
    color: var(--text-color);
}

.post-card .entry-title a:hover {
    color: var(--primary-accent);
}

/* REMOVED OBSOLETE STYLES for .post-card .entry-summary */
/* .post-card .entry-summary { ... } */
/* .post-card .entry-summary p:last-child { ... } */

/* New bottom row styles */
.post-card-bottom-row {
    display: flex;
    justify-content: space-between; /* Category left, button right */
    align-items: center; /* Vertically center items */
    margin-top: 0.25rem; /* Reduced space above the bottom row */
}

/* Responsive Grid Columns */
@media (min-width: 768px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* Related Posts Grid - Image Style (Ensure it uses card style) */
.related-posts-grid .post-card-thumbnail img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Crop image nicely */
    border-bottom: none; /* Remove extra border if using card structure */
    display: block;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.navigation.pagination {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nav-links .page-numbers {
    display: inline-block;
    padding: 0.5em 1em;
    min-width: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: var(--link-color);
    background-color: #fff;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
    background-color: var(--primary-accent);
    color: #000; /* Black text on accent */
    border-color: var(--primary-accent);
}

.nav-links .page-numbers.current {
    font-weight: 600;
}

.nav-links .dots {
    padding: 0.5em 0.5em;
    border: none;
    background: none;
}

.nav-links .prev,
.nav-links .next {
    /* Optionally style prev/next differently */
}

/*--------------------------------------------------------------
# Load More Button
--------------------------------------------------------------*/
.load-more-container {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#load-more-posts {
    /* Inherits .button .button-primary styles */
    padding: 12px 30px; /* Slightly larger padding */
    font-size: 1rem;
}

#load-more-posts:disabled {
    cursor: wait;
    opacity: 0.7;
}

/*--------------------------------------------------------------
# Page Templates
--------------------------------------------------------------*/

/* ## Page Hero */
.page-hero-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 0 0 0;
    width: 100%;
    text-align: center;
}

.page-hero-header .entry-title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-color);
    margin: 0 auto 1.5rem auto;
    max-width: 900px;
}


.scroll-down-indicator {
    display: none; /* Hide the scroll indicator */
    /* animation: simple-bounce 2s infinite; Remove animation */
}

/* Remove bounce animation */
@keyframes simple-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(8px); opacity: 1; }
}

/* ## Page Content Adjustments */
.entry-page {
    padding-top: 0; /* Reset padding potentially added elsewhere */
    padding-bottom: 3rem;
}

/* Combined with single post featured image styles */
/* .page-featured-image { ... } */

.entry-comments {
    margin-top: 3rem; /* Space before comments section */
}

/* Responsive Page Title Sizes */
@media (min-width: 768px) {
    .page-hero-header .entry-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1200px) {
    .page-hero-header .entry-title {
        font-size: 4.2rem;
    }
}

/*--------------------------------------------------------------
# Gutenberg Blocks
--------------------------------------------------------------*/

/* ## Latest Posts */
/* Make the block wrapper behave like our grid container */
.wp-block-latest-posts ul.wp-block-latest-posts__list.is-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 2rem; /* Match custom grid gap */
    list-style: none;
    padding: 0;
    margin: 0; /* Reset WP default margin */
}

/* Style the list items (li) like our post-card */
.wp-block-latest-posts ul.wp-block-latest-posts__list li {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 0;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* Featured Image wrapper */
.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image {
    line-height: 0;
    margin: 0;
    order: 0; /* Image first */
    height: 200px; /* Match card image height */
    overflow: hidden;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image a,
.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inner content padding */
.wp-block-latest-posts ul.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title,
.wp-block-latest-posts ul.wp-block-latest-posts__list li > .wp-block-latest-posts__post-author,
.wp-block-latest-posts ul.wp-block-latest-posts__list li > time.wp-block-latest-posts__post-date,
.wp-block-latest-posts ul.wp-block-latest-posts__list li > .wp-block-latest-posts__post-excerpt {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Title */
.wp-block-latest-posts ul.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title {
    padding-top: 1.5rem;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    order: 1;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title:hover {
    color: var(--primary-accent);
}

/* Author */
.wp-block-latest-posts ul.wp-block-latest-posts__list li > .wp-block-latest-posts__post-author {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.75rem;
    order: 2;
}

/* Excerpt */
.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-excerpt {
    margin-bottom: 1rem;
    flex-grow: 1;
    color: #555;
    font-size: 0.95rem;
    order: 3;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-excerpt p:last-child {
    margin-bottom: 0;
}

/* Date */
.wp-block-latest-posts ul.wp-block-latest-posts__list li time.wp-block-latest-posts__post-date {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.85rem;
    color: #555;
    order: 4;
}

/* Responsive Columns for Latest Posts Block - Target the UL */
@media (min-width: 768px) {
    .wp-block-latest-posts ul.wp-block-latest-posts__list.is-grid,
    .wp-block-latest-posts[style*="columns: 2"] ul.wp-block-latest-posts__list {
        grid-template-columns: repeat(2, 1fr) !important; /* Override inline styles */
    }
}

@media (min-width: 1200px) {
    .wp-block-latest-posts ul.wp-block-latest-posts__list.is-grid,
    .wp-block-latest-posts[style*="columns: 3"] ul.wp-block-latest-posts__list {
        grid-template-columns: repeat(3, 1fr) !important; /* Override inline styles */
        gap: 2.5rem !important;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/* ## Main Footer */
.site-footer {
    margin-top: 3rem;
    padding: 1.5rem 0;
    font-size: 0.9rem;
    text-align: center;
    color: #555;
}

/* ## Footer Bottom Bar (Copyright & Language Switcher) */
.footer-bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap; /* Allow wrapping on smaller screens */
	gap: 15px;
	padding: 15px 0;
}

.copyright-info {
	flex-grow: 1;
	text-align: left;
}

.language-switcher {
	position: relative;
}

/* Basic Styling for Polylang Dropdown */
.language-switcher select {
	background-color: #2a2a2a;
	color: #e0e0e0;
	border: 1px solid #444;
	padding: 8px 30px 8px 12px; /* Right padding for arrow space */
	border-radius: 6px;
	cursor: pointer;
	font-size: 0.9em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* Custom arrow indicator */
	background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e0e0e0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 10px auto;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.language-switcher select:hover,
.language-switcher select:focus {
	background-color: #3a3a3a;
	border-color: #666;
	outline: none;
}

/* Footer Bottom Responsive */
@media (max-width: 768px) {
	.footer-bottom-content {
		justify-content: center;
		text-align: center;
	}
	.copyright-info {
		text-align: center;
		width: 100%;
		order: 2; /* Place copyright below switcher */
	}
	.language-switcher {
		width: auto;
		margin-bottom: 10px;
		order: 1; /* Place switcher above copyright */
	}
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* ## Scroll to Top Button */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background: var(--gradient);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 20%;
    font-size: 18px;
    line-height: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, opacity 0.3s, visibility 0.3s;
}

#scrollToTopBtn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* ## Core WP Classes */
.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

/* Add styles for centered content */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ## Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Category Archive Specifics
--------------------------------------------------------------*/
.category-header {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
}

.category-title {
    margin-bottom: 0.5rem;
    font-size: clamp(3.5rem, 12vw, 10rem); /* Increased max size */
    font-weight: 900; /* Very bold */
    line-height: 1.1; /* Adjust line height for large font */

    /* Gradient Text */
    background: var(--gradient);
    background-size: 100% auto; /* Ensure gradient covers width, can adjust if needed */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-bottom: 0.2em; /* Small padding to prevent clipping */
    display: inline-block; /* Needed for background-clip to work reliably with padding/margins */
}

.category-description {
    font-size: 1rem;
    color: #555;
    max-width: 70ch;
}

/* Responsive Adjustments for Category Header */
@media (min-width: 768px) {
    .category-title {
        /* font-size: 2.5rem; */ /* REMOVE THIS LINE - conflicts with clamp() */
    }
     .category-description {
        font-size: 1.1rem;
    }
}

@media (min-width: 1024px) {
     .category-title {
        /* font-size: 3rem; */ /* REMOVE THIS LINE - conflicts with clamp() */
    }
}

/* Note: .posts-grid styles defined in Archive/Index section apply here too */

/*--------------------------------------------------------------
# 404 Page
--------------------------------------------------------------*/
.error-404 {
    padding: 3rem 0;
    margin-top: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.error-404 .page-header {
    margin-bottom: 2rem;
    border-bottom: none;
}

.error-404 .not-found-header {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    color: var(--primary-accent);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.error-404 .not-found-message {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.error-404 .page-content p {
    color: #555;
    margin-bottom: 1.5em;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

.error-404 .widget_recent_entries {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #eee;
    text-align: left;
}

.error-404 .widget-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.error-404 .widget_recent_entries ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-404 .widget_recent_entries li {
    margin-bottom: 0.75rem;
}

.error-404 .widget_recent_entries li:last-child {
    margin-bottom: 0;
}

.error-404 .widget_recent_entries a {
    text-decoration: none;
    color: var(--link-color);
    transition: color 0.2s ease;
}

.error-404 .widget_recent_entries a:hover {
    color: var(--primary-accent);
    text-decoration: underline;
}

.error-404 .return-home-link {
    margin-top: 2.5rem;
}

.error-404 .button.button-primary {
    padding: 12px 30px;
    font-size: 1rem;
    /* Uses default primary button styles */
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/

/* Mobile adjustments for Single Post Header */
@media (max-width: 767px) {
    /* Header adjustments for mobile */
    .header-main {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    /* Line 1: Logo */
    .header-main .site-branding {
        order: 1;
        max-width: 180px;
        flex-grow: 0;
        flex-shrink: 0;
        margin-right: 0; /* Reset desktop margin */
    }
    .header-main .site-branding .custom-logo-link img {
        width: 150px;
    }

    /* Line 1: Toggle Container */
    .header-main .header-main-right {
        order: 2;
        flex-shrink: 0;
    }

    /* Line 2: Search Container */
    .header-main .search-form-container {
        order: 3;
        width: 100%; /* Occupy full width of the line first */
        max-width: 95%; /* Then limit its max width */
        margin: 0.75rem auto 0 auto; /* Top margin + horizontal centering */
        display: block; /* Make it block level for margin auto centering */
        flex-shrink: 1; /* Allow shrinking (redundant but safe) */
    }
    /* Ensure form fills the centered container */
     .header-main .search-form-container .search-form {
       width: 100%;
       max-width: 100%; /* Override potential fixed max-width */
       margin: 0 auto; /* Center form if needed (might not be necessary) */
       display: flex; /* Keep form internals flex */
     }

    /* Ensure toggle has correct styles (no change needed) */
     .header-main .menu-toggle.main-menu-toggle {
     }

    /* Mobile adjustments for Single Post Header */
    .single-post-header .post-featured-image-container {
        flex: 0 0 80px;
        width: 80px;
        height: 80px;
    }

    .single-post-header {
        gap: 15px;
    }

    .entry-single .entry-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .post-info .entry-title {
        font-size: 1.4rem;
        line-height: 1.2;
    }
}

/* Tablet */
@media (min-width: 768px) {
    .custom-logo-link img,
    .site-branding img.custom-logo {
        width: 200px;
    }
}

/* Desktop */
@media (min-width: 992px) {
}

/* Larger Desktop / Container Breakpoint */
@media (min-width: 1200px) {
    .custom-logo-link img,
    .site-branding img.custom-logo {
        width: 300px;
    }
}

/* Tablet & Small Desktops (for Category Grid - adjusted breakpoint) */
@media (min-width: 1024px) {
}

/* ## Single Post / Page Content Specifics */
.single .site-main,
.page .site-main {
    /* No extra spacing needed currently */
}

.entry-narrow-container {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.entry-single .entry-header {
    margin-bottom: 1.5rem;
}

.entry-single .entry-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 0.2rem;
    color: #111;
}

/* Meta styles are handled in the consolidated section */

/* Featured Image positioning */
.entry-single .entry-featured-image,
.page-featured-image {
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    line-height: 0;
}

/* Content container (already narrow via parent) */
.entry-single .entry-content,
.page .entry-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
}

/* Remove default margins from direct children within single/page content */
.entry-single .entry-content > *:first-child,
.page .entry-content > *:first-child {
    margin-top: 0;
}
.entry-single .entry-content > *:last-child,
.page .entry-content > *:last-child {
    margin-bottom: 0;
}

/* ## Post Tags */
.entry-single .post-tags { 
    font-size: 0.9rem;
}

.entry-single .tags-title {
    font-weight: 600;
    margin-right: 0.5em;
    color: #555;
}

.entry-single .post-tags a {
    display: inline-block;
    text-decoration: none;
    color: #fff; /* White text */
    background-color: var(--primary-accent); /* Primary accent background */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-right: 0.5em;
    margin-bottom: 0.5em; /* Spacing if wraps */
    border: none;
}

.entry-single .post-tags a:hover {
    background-color: var(--secondary-accent);
    color: #fff;
}

/* Rank Math Breadcrumbs Styling */
.rank-math-breadcrumb {
  font-size: 0.9em; /* Ligeramente más pequeño */
  color: #555; /* Gris oscuro */
  margin-bottom: 1.5em; /* Espacio debajo antes del título */
}

.rank-math-breadcrumb p {
  margin-bottom: 0; /* Eliminar margen inferior si Rank Math usa un párrafo */
}

.rank-math-breadcrumb a {
  color: #555; /* Gris oscuro para los enlaces */
}

.rank-math-breadcrumb a:hover {
  color: #1a1a1a; /* Gris más oscuro al pasar el ratón */
  text-decoration: underline;
}

/* Estilo para el separador (si es necesario ajustarlo) */
.rank-math-breadcrumb .separator {
  color: #555; /* Gris un poco más claro para el separador */
}

/* Single Post Category Tag Styling */
.entry-category-container {
  margin-top: 0.5rem; /* Space below title */
  margin-bottom: 1rem; /* Space above meta */
}

.entry-category-tag {
    display: inline-block;
    background-color: transparent; /* Ensure no background */
    padding: 0.25rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 15px;
    text-decoration: none;
    text-transform: uppercase; /* Ensure uppercase */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Text color based on contrast */
.post-card-category.has-light-text,
.entry-category-tag.has-light-text {
    color: #fff; /* Use white text for dark backgrounds */
}

.post-card-category.has-dark-text,
.entry-category-tag.has-dark-text {
    color: #111; /* Use dark text for light backgrounds (default) */
}

/*--------------------------------------------------------------
# Custom Styles for Category List in Off-Canvas Panel
--------------------------------------------------------------*/
.primary-menu-panel-container ul.category-menu-panel-list {
    list-style: none;
    padding: 0;
    margin: 0; /* Reset defaults */
}

.primary-menu-panel-container ul.category-menu-panel-list li {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Separator like primary menu */
}

.primary-menu-panel-container ul.category-menu-panel-list li:last-child {
    border-bottom: none;
}

.primary-menu-panel-container ul.category-menu-panel-list a {
    display: block;
    padding: 1rem 0; /* More vertical padding */
    text-decoration: none;
    color: #ffffff; /* White color */
    font-size: 1.2rem; /* Larger font size */
    font-weight: 500;
    transition: background-color 0.25s ease-in-out, color 0.25s ease-in-out, padding-left 0.25s ease-in-out;
    position: relative; /* For potential pseudo-elements later */
}

.primary-menu-panel-container ul.category-menu-panel-list a:hover,
.primary-menu-panel-container ul.category-menu-panel-list li.current-cat > a { /* Style current category too */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background highlight */
    color: var(--primary-accent); /* Change text color to primary accent on hover */
    padding-left: 1rem; /* Indent text slightly on hover */
}

/* Optional: Add a little indicator for hover/current */
.primary-menu-panel-container ul.category-menu-panel-list a:hover::before,
.primary-menu-panel-container ul.category-menu-panel-list li.current-cat > a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%; /* Adjust height */
    background-color: var(--primary-accent);
    border-radius: 0 2px 2px 0;
    opacity: 1;
    transition: opacity 0.25s ease-in-out;
}

.primary-menu-panel-container ul.category-menu-panel-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background-color: var(--primary-accent);
    border-radius: 0 2px 2px 0;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}

/* ==========================================================================
   Search Form Styles
   ========================================================================== */

/* New wrapper for positioning AJAX results */
.search-form-container {
    position: relative;
    max-width: 300px;
    display: inline-block;
    vertical-align: middle;
}

/* .search-form rules are defined below, remove duplicates introduced earlier */

.search-form {
    /* Original search form styles */
    /* position: relative; /* Removed as container handles positioning */
    padding: 3px;
    background: var(--gradient);
    display: inline-flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    max-width: 300px;
}

.search-form label {
    display: flex;
    flex-grow: 1;
    margin: 0;
}

.search-form .search-field {
    height: 45px;
    padding: 0 15px;
    border: none;
    background-color: #fff;
    flex-grow: 1;
    margin: 0;
    box-sizing: border-box;
    font-size: 1rem;
    color: #333;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.search-form .search-field:focus {
    outline: none;
    box-shadow: none;
}

.search-form .search-submit {
    height: 45px;
    border: none;
    background-color: #eee;
    padding: 0 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    flex-shrink: 0;
}

.search-form .search-submit svg {
    width: 18px;
    height: 18px;
    fill: #555;
}

.search-form .search-submit:hover {
    background-color: #ddd;
}

/* ==========================================================================
   AJAX Search Results Styles
   ========================================================================== */

.ajax-search-results-container {
    position: absolute;
    z-index: 999;
    width: 100%; /* Will now be 100% of the search-form-container */
    top: calc(100% + 8px); /* Position below the container */
    left: 0;
    background: var(--gradient);
    padding: 3px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ajax-search-results-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fff; /* White background for the content */
    max-height: 300px; /* Limit height and make it scrollable */
    overflow-y: auto;
    border-radius: 7px; /* Inner radius slightly smaller than container */
}

.ajax-result-item a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s ease;
}

.ajax-result-item:last-child a {
    border-bottom: none;
}

.ajax-result-item a:hover {
    background-color: #f9f9f9;
    color: var(--primary-accent);
}

.result-thumbnail {
    width: 45px;
    height: 45px;
    object-fit: cover;
    margin-right: 15px;
    border-radius: 4px;
    flex-shrink: 0;
}

.result-thumbnail-placeholder {
    width: 45px;
    height: 45px;
    background-color: #eee;
    margin-right: 15px;
    border-radius: 4px;
    display: inline-block; /* Make span take width/height */
    flex-shrink: 0;
}

.result-title {
    font-size: 0.95rem;
    line-height: 1.3;
    font-weight: 500;
}

/* Loading/Error States */
.loading-indicator,
.no-results,
.error-results {
    padding: 15px;
    text-align: center;
    color: #555;
    background-color: #fff; /* Ensure white background */
    border-radius: 7px; /* Match inner radius */
    font-style: italic;
}